<template>
  <div>
    <Table :border="true" :stripe="true" :show-header="true" :height="340" :data="tableData" :columns="tableColumns"></Table>
    <div class="add-group">
      <Button type="primary" @click="showAddGroupPanel2">增加组</Button>
    </div>
    <EditUserGroup :showModal="showEditGroup" v-on:closeEditGroupModal="closeEditModal" :type="editType" :oldGroupName="editGroupName"
      :oldGroupMenus="editKeys" :oldGroupPowers="editPowers" :oldGroupId="editGroupId"></EditUserGroup>
    <EditGroupMembers :showModal="showEditGroupMembers" v-on:closeEditGroupMembersModel="closeEditGroupMembers" :gid="gid" ></EditGroupMembers>
  </div>
</template>
<script>
import {getAllUserGroup, delUserGroup, getAllGroupVOList} from '@/api/group.js'
import EditUserGroup from './EditUserGroup'
import EditGroupMembers from './EditGroupMembers'
export default {
  data () {
    return {
      tableData: [],
      showEditGroup: false,
      showEditGroupMembers: false,
      editType: 1,
      editKeys: [],
      editPowers: [],
      editGroupName: '',
      editGroupId: 0,
      gid: 0
    }
  },
  components: {
    EditUserGroup,
    EditGroupMembers
  },
  created () {
    this.getAllGroup()
  },
  methods: {
    getAllGroup () {
      getAllUserGroup().then((data) => {
        if (!data) {
          return
        }
        this.tableData = getAllGroupVOList(data)
        // console.log(this.getAllMenuList())
      })
    },
    removeOneGroup (idx) {
      this.tableData.splice(idx, 1)
    },
    showAddGroupPanel2 () {
      this.editType = 1
      this.editKeys = []
      this.editPowers = []
      this.editGroupName = ''
      this.editGroupId = 0
      this.showEditGroup = true
    },
    removeUserGroup (idx) {
      let gid = this.tableData[idx].gid
      delUserGroup(gid).then((data) => {
        if (!data) {
          return
        }
        let pv = data.data.data
        let success = pv.intValues[0]
        // console.log('delUserGroup', success, gid)
        if (success === 1) {
          this.removeOneGroup(idx)
        }
      })
    },
    modifyMGroupMembers () {
      console.log('modifyMGroupMembers')
      this.showEditGroupMembers = true
    },
    closeEditModal () {
      console.log('closeEditModal')
      this.editType = 1
      this.editKeys = []
      this.editPowers = []
      this.oldGroupId = 0
      this.showEditGroup = false
      this.getAllGroup()
    },
    closeEditGroupMembers () {
      console.log('closeEditGroupMembers')
      this.showEditGroupMembers = false
    }
  },
  computed: {
    tableColumns () {
      let cols = [
        {
          title: '用户组ID',
          key: 'gid',
          width: 90
        },
        {
          title: '用户组名称',
          key: 'gName',
          width: 110
        },
        {
          title: 'menu列表(ids)',
          key: 'except'
        },
        {
          title: '操作权限列表',
          key: 'exceptAction',
          width: 160
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          align: 'center',
          render: (h, params) => {
            // console.log(h, params)
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    let idx = params.index
                    let tableCell = this.tableData[idx]
                    // console.log('tableCell', tableCell)
                    this.editType = 0
                    this.editKeys = tableCell.except ? tableCell.except.split(',') : []
                    this.editKeys = this.editKeys.map(item => parseInt(item))
                    this.editPowers = tableCell.exceptAction ? tableCell.exceptAction.split(',') : []
                    this.editPowers = this.editPowers.map(item => parseInt(item))
                    this.editGroupName = '' + tableCell.gName
                    this.editGroupId = tableCell.gid
                    this.showEditGroup = true
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '警告',
                      content: '<p>你确定编辑这个用户组成员吗？</p>',
                      onOk: () => {
                        let idx = params.index
                        let tableCell = this.tableData[idx]
                        this.gid = tableCell.gid
                        console.log('this.gid:', this.gid)
                        this.modifyMGroupMembers()
                      }
                    })
                  }
                }
              }, '编辑组成员')
               // h('Button', {
              //   props: {
              //     type: 'error',
              //     size: 'small'
              //   },
              //   on: {
              //     click: () => {
              //       let idx = params.index
              //       this.$Modal.confirm({
              //         title: '警告',
              //         content: '<p>确定要删除这个用户组吗？</p>',
              //         onOk: () => {
              //           this.removeUserGroup(idx)
              //         }
              //       })
              //     }
              //   }
              // }, '删除组')
            ])
          }
        }
      ]
      return cols
    }
  }
}
</script>

<style>
.add-group{
  margin: 15px auto;
}
</style>
